<template>
    <view>
        <view @click="DatePicker('datetime')">{{ datetime }}</view>
        <mx-date-picker
            :show="showPicker"
            :type="type"
            :value="value"
            :show-tips="true"
            :show-seconds="true"
            @confirm="ed"
            @cancel="ed" />
    </view>
</template>

<script>
import utils from "@/utils/utils.js"
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
export default {
    components: {
        MxDatePicker,
    },
    props: {
        data: {
            // 数据
            type: Array,
        },
        index: {
            type: Number,
            default: 0,
        },
        date: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            datetime: "",
            type: "datetime",
            value: "",
            showPicker: false,
        }
    },
    mounted() {
        if (!this.date) {
            this.datetime = utils.getDatetime({
                format: true,
            })
        } else {
            this.datetime = this.date
        }
    },
    methods: {
        DatePicker(type) {
            //显示
            this.type = type
            this.showPicker = true
            this.value = this[type]
        },
        ed(e) {
            //选择
            this.showPicker = false
            if (e) {
                this[this.type] = e.value
                //选择的值
                console.log("value => " + e.value)
                //原始的Date对象
                console.log("date => " + e.date)
                this.$emit("ed", this.index, e.value)
            }
        },
    },
}
</script>

<style lang="scss">
.checkmain {
    display: flex;
    flex-wrap: wrap;

    label {
        display: flex;
        width: 50%;

        view {
            white-space: nowrap;
        }
    }
}
</style>
